﻿@{
    ViewData["Title"] = "预定课程";

}
@section Styles{

    <style>

        .desc {
            min-height: 79px;
            max-height: 79px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }
        .btn-highlight {
            color: #fff;
            background-color: #7e57c2;
            border-color: #7e57c2;
        }

            .btn-highlight:hover {
                color: #fff;
            }

        .card-box {
            /*background-color: #F2F5F5;*/
            background-color: #ffffff;
        }

            .card-box:hover {
                background-color: #fffff9;
            }
    </style>

   
      
      

     
}



<!-- Start Content-->
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">

                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="fa fa-map-marker-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="javascript: void(0);">预定课程</a></li>
                        <li class="breadcrumb-item active">/</li>
                    </ol>
                </div>
                <h4 class="page-title">预定课程</h4>
            </div>
        </div>
    </div>

    @*<div class="card">
        <div class="card-body">*@
    <!-- end page title -->
    <div class="row mb-0">

        <div class="col-sm-12">
            <div class="text-sm-left">
                <div class="btn-group mb-3">
                    <button type="button" class="btn btn-light btn-filter btn-outline-primary" data-status="0">新的</button>
                </div>
                <div class="btn-group mb-3 ml-1">
                    <button type="button" class="btn btn-light btn-filter btn-outline-primary btn-highlight" data-status="1">进行中</button>
                </div>
                <div class="btn-group mb-3 ml-1">
                    <button type="button" class="btn btn-light btn-filter btn-outline-primary" data-status="2">完成的</button>
                </div>

                @*<div class="btn-group mb-3 ml-2 d-none d-sm-inline-block">
                        <button type="button" class="btn btn-dark"><i class="mdi mdi-apps"></i></button>
                    </div>
                    <div class="btn-group mb-3 d-none d-sm-inline-block">
                        <button type="button" class="btn btn-link text-dark"><i class="mdi mdi-format-list-bulleted-type"></i></button>
                    </div>*@<!--implement it in future -->
            </div>
        </div><!-- end col-->
    </div>
    <!-- end row-->
    <div class="list">

    </div>


    <!-- end row -->
    @*<div class="row">
            <div class="col-12">
                <div class="text-center mb-3">
                    <a href="javascript:void(0);" class="text-danger"><i class="mdi mdi-spin mdi-loading mr-1"></i> Load more </a>
                </div>
            </div>  end col
        </div>*@


    <!-- end row -->
    @*</div>
        </div>*@
</div>

<div id="modalDefault" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div><!-- /.modal -->
@section Scripts{
    @await Html.PartialAsync("_ValidationScriptsPartial")
    <script src="~/assets/libs/moment/moment.min.js"></script>

    <script>


        var table;

        $(function () {

            $.ajax({
                type: 'POST',
                url: '/Booking/Courses/1',
                success: function (data) {
                    $(".list").html(data);
                }
            });

            $(".btn-filter").click(function () {

                var status = $(this).data().status;

                $(".btn-filter").removeClass("btn-highlight");

                $(this).addClass("btn-highlight");

                $.ajax({
                    type: 'POST',
                    url: '/Booking/Courses/' + status,
                    success: function (data) {
                        $(".list").html(data);
                    }
                });
            });

        });


        function ShowPopup(url) {
            var modalId = 'modalDefault';
            var modalPlaceholder = $('#' + modalId + ' .modal-dialog .modal-content');
            $.get(url)
                .done(function (response) {
                    modalPlaceholder.html(response);
                    popup = $('#' + modalId + '').modal({
                        keyboard: false,
                        backdrop: 'static'
                    });
                });
        }


        function SubmitForm(form, url) {
            $(form).removeData('validator');
            $(form).removeData('unobtrusiveValidation');
            $.validator.unobtrusive.parse(form);
            if ($(form).valid()) {
                var data = $(form).serializeJSON();
                data = JSON.stringify(data);

                $.ajax({
                    type: 'POST',
                    url: url,
                    data: data,
                    contentType: 'application/json',
                    success: function (data) {
                        if (data.success) {
                            popup.modal('hide');
                            ShowMessage(data.message);
                            setTimeout(function () {
                                window.location.href = "/Course/Index";
                            }, 2000);

                        } else {
                            ShowMessageError(data.message);
                        }
                    }
                });

            }
            return false;
        }

        function Remove(id) {


            Swal.fire({
                title: "删除",
                text: "确定删除?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#dd4b39",
                confirmButtonText: "是的，删除!",
                cancelButtonText: "取消",

            }).then(function () {
                $.ajax({
                    type: 'POST',
                    url: '/Course/Delete/' + id,
                    success: function (data) {
                        if (data.success) {
                            ShowMessage(data.message);
                            setTimeout(function () {
                                window.location.href = "/Course/Index";
                            }, 2000);
                        } else {
                            ShowMessageError(data.message);
                        }
                    }
                });
            });


        }

        function UpdateStatus(id) {

            $.ajax({
                type: 'POST',
                url: '/Course/ChangeStatus/' + id,
                success: function (data) {
                    if (data.success) {
                        ShowMessage(data.message);
                        setTimeout(function () {
                            window.location.href = "/Course/Index";
                        }, 2000);
                    } else {
                        ShowMessageError(data.message);
                    }
                }
            });



        }
    </script>
}

